<!doctype html>
<html lang="en">
 
	<head>
		<meta charset="UTF-8">
		<title>div模拟textarea文本域轻松实现高度自适应</title>
		<style>
			h2 {
				text-align: center;
				margin: 50px auto;
			}
			
			.test_box {
				width: 400px;
				min-height: 20px;
				/*设置最小高度*/
				max-height: 1000px;
				/*设置最大高度超过300px时出现滚动条*/
				_height: 120px;
				margin-left: auto;
				margin-right: auto;
				padding: 13px;
				outline: 0;
				border: 1px solid #a0b3d6;
				font-size: 16px;
				line-height: 24px;
				word-wrap: break-word;
				overflow-x: hidden;
				overflow-y: auto;
				border-color: rgba(82, 168, 236, 0.8);
				box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
			}
		</style>
 
	</head>
 
	<body>
		<h2>div模拟textarea文本域轻松实现高度自适应</h2>
		<div class="test_box" contenteditable="true">
			<br />
		</div>
	</body>
 
</html>